import {
  addTodoService,
  getTodoService,
  removeTodoService,
  toggleTodoService
} from '../../service/todo';
import {
  computed,
  ref,
  watch,
  watchEffect,
  effectScope,
  onScopeDispose,
  getCurrentScope
} from 'vue';

export function useTodoList() {
  const todoData = ref([]);
  const type = ref('');
  let todoCount = null;

  const getTodo = () => {
    getTodoService().then((todos) => (todoData.value = todos));
  };

  const addTodo = async (todoText) => {
    type.value = 'addTodo';
    const todo = {
      id: new Date().getTime(),
      content: todoText,
      completed: false
    };

    try {
      await addTodoService(todo);
      todoData.value.push(todo);
    } catch (e) {}
  };

  const toggleTodo = async (id) => {
    type.value = 'toggleTodo';

    try {
      await toggleTodoService(id);
      todoData.value = todoData.value.map((item) => {
        if (item.id === id) {
          item.completed = !item.completed;
        }
        return item;
      });
    } catch (e) {}
  };

  const removeTodo = async (id) => {
    type.value = 'removeTodo';

    try {
      await removeTodoService(id);
      todoData.value = todoData.value.filter((item) => item.id !== id);
    } catch (e) {}
  };

  /**
   * effectScope是`Composition API`中的一个用于给`computed`，`watch`，`watchEffect`方法定义作用域的方法。目的是为了解决组件中除了组件本身在卸载时会销毁侦听等一系列函数，但是对于一些自定义的`hooks`里定义声明的`computed`，`watch`，`watchEffect`方法仍存在全局中并没有销毁。
   */
  // const scope = effectScope();

  // //获取当前定义的`effectScope`的作用域。
  // const curScope = getCurrentScope();
  // /**
  //  console.log(curScope);
  //  * EffectScope {
  //  *   detached: true,
  //  *   _active: true,
  //  *   effects: Array(0),
  //  *   cleanups: Array(0),
  //  *   parent: undefined,
  //  *   scopes: [],
  //  *   active: true,
  //  *   [[prototype]]: {
  //  *     off: ƒ off(),
  //  *     on: ƒ on(),
  //  *     run: ƒ run(),
  //  *     stop: ƒ stop()
  //  *   }
  //  * }
  //  */

  // //回调函数内部可以定义组件需要的computed,watch,watchEffect等一系列监听数据依赖的方法
  // scope.run(() => {
  //   //数据变化时重新计算
  //   todoCount = computed(() => todoData.value.length);

  //   //监听数据源触发getter首次请求数据
  //   watchEffect(getTodo);

  //   //watch懒监听数据，变更a a a时进行日志打印
  //   watch(type, () => {
  //     switch (type.value) {
  //       case 'addTodo':
  //         console.log('add successfully!');
  //         break;
  //       case 'toggleTodo':
  //         console.log('toggle successfully!');
  //         break;
  //       case 'removeTodo':
  //         console.log('remove successfully!');
  //         break;
  //       default:
  //         break;
  //     }
  //   });

  //   //定义该函数可以清除释放作用域
  //   onScopeDispose(() => {
  //     console.log('clear');
  //   });
  // });

  // //可以注销computed,watch,watchEffect等方法侦听
  // //避免给watch,watchEffect单独定义注销侦听方法
  // scope.stop();

  todoCount = computed(() => todoData.value.length);

  //监听数据源触发getter首次请求数据
  watchEffect(getTodo);

  //watch懒监听数据，变更a a a时进行日志打印
  watch(type, () => {
    switch (type.value) {
      case 'addTodo':
        console.log('add successfully!');
        break;
      case 'toggleTodo':
        console.log('toggle successfully!');
        break;
      case 'removeTodo':
        console.log('remove successfully!');
        break;
      default:
        break;
    }
  });

  return {
    todoData,
    todoCount,
    addTodo,
    toggleTodo,
    removeTodo
  };
}
